<template>
  <div class="consulation-service pd-20">
    <el-row class="mt-20">
      <el-col :span="4">
        <el-button type="primary"
                   size="mini"
                   @click="handleAdd">新增省市编码</el-button>
      </el-col>
    </el-row>
    <el-form :model="addForm"
             ref="addForm"
             label-width="100px"
             class="mt-20">
      <div class="
             mt-20">
        <div v-for="(item, index) in addForm.areaCodeDtos"
             :key="item.key"
             class="box-wrapper mt-20">
          <el-row>
            <el-col :span="7">
              <el-form-item label="选择省:"
                            :prop="'areaCodeDtos.' + index + '.baseAreaId'">
                <el-select v-model="item.baseAreaId"
                           filterable
                           :disabled="item.isShowProvince"
                           placeholder="请选择省"
                           @change="handleVal(item, index)">
                  <el-option v-for="item in provinceList"
                             :label="item.name"
                             :value="item.id"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>


            <el-col :span="7">
              <el-form-item label="省统一编码:"
                            :prop="'areaCodeDtos.' + index + '.baseAreaCode'">
                <el-input class="w-200"
                          type="text"
                          v-model="item.baseAreaCode"
                          show-word-limit
                          placeholder="请输省入统一编码">

                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="三级医院收费:"
                            :prop="'areaCodeDtos.' + index + '.charge'">
                <el-input class="w-200"
                          type="text"
                          v-model="item.tertiaryHospitalFee"
                          show-word-limit
                          placeholder="请输入三级医院收费">

                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-button type="danger"
                         @click="removeForm(item)">删 除</el-button>
            </el-col>
          </el-row>

          <ul class="city-box">
            <li v-for="list in item.areaCodeDtos"
                :key="list.baseAreaId"
                class="city-item">
              <div>
                <label style="min-width:100px;">{{list.name}}</label>
                <el-input v-model="list.baseAreaCode"
                          type="text"
                          v-if="list.isShow"
                          :placeholder="`请输入${list.name}统一编码`"
                          class="w-200"></el-input>
                <el-input v-model="list.tertiaryHospitalFee"
                          type="text"
                          v-if="list.isShow"
                          :placeholder="`${list.name}收费`"
                          style="width: 100px"></el-input>
              </div>
            </li>
          </ul>
        </div>
        <el-form-item>
          <div class="mt-20 submit-btn">
            <el-button type="primary"
                       @click="submitForm('addForm')">保 存</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>

  </div>
</template>
<script>
  export default {
    name: 'consulationService', // 问诊服务
    data () {
      return {
        type: 'inquiry',
        addForm: {
          baseAreaCode: '', // 全国统一编码
          tertiaryHospitalFee:'',//三级医院收费标准
          areaCodeDtos: [
            {
              baseAreaId: '', // 省ID
              baseAreaCode: '', // 省统一编码
              tertiaryHospitalFee:'',//三级医院收费标准
              areaCodeDtos: [
                {
                  baseAreaId: '', // 市ID
                  tertiaryHospitalFee:'',//三级医院收费标准
                  baseAreaCode: '' // 市统一编码
                }
              ]
            }
          ]
        },
        provinceList: [],
        isShow: false,
        isShowProvince: false,
      }
    },
    methods: {
      // 提交事件
      submitForm (formName) {
        let res = this.addForm.areaCodeDtos
        if (res.length > 0) {
          let item = res[res.length - 1]
          if (item.baseAreaId === '') {
            this.$message.error('请选择省');
            return
          }
          if (item.baseAreaCode === '') {
            this.$message.error('请填写省统一编码');
            return
          }
        }
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            /* this.addForm.areaCodeDtos.map(item => {
              item.areaCodeDtos = item.areaCodeDtos.filter(e => e.baseAreaCode != '')
              return item
            }); */
            const { data: res } = await this.post(this.api.codeConfig.updateServiceChargeCode, {
              code: this.type,
              ...this.addForm
            })

            if (res.code === '200') {
              this.$message.success('保存成功')
              this.getServiceChargeCode()
            } else {
              this.$message.error(res.message)
            }
          }
        });
      },
      // 重置事件
      resetForm (formName) {
        this.$refs[formName].resetFields();
      },
      // 添加表单项事件
      handleAdd () {
        this.getChildrenArea()
        let res = this.addForm.areaCodeDtos
        if (res.length > 0) {
          let item = res[res.length - 1]
          if (item.baseAreaId === '') {
            this.$message.error('请选择省');
            return
          }
          if (item.baseAreaCode === '') {
            this.$message.error('请填写省统一编码');
            return
          }
          this.addForm.areaCodeDtos.push({
            baseAreaId: '',
            baseAreaCode: '',
            areaCodeDtos: [
              {
                baseAreaId: '', // 市ID
                baseAreaCode: '' // 市统一编码
              }
            ],
          });
        } else {
          this.addForm.areaCodeDtos.push({
            baseAreaId: '',
            baseAreaCode: '',
            areaCodeDtos: [
              {
                baseAreaId: '', // 市ID
                baseAreaCode: '' // 市统一编码
              }
            ],
          });
        }

      },
      // 移除表单项事件
      removeForm (item) {
        var index = this.addForm.areaCodeDtos.indexOf(item)
        if (index !== -1) {
          this.addForm.areaCodeDtos.splice(index, 1)
        }
      },

      // 选择省
      async getChildrenArea () {
        const { data: res } = await this.post(this.api.codeConfig.getChildrenArea, {
          id: 0
        })
        if (res.code === '200') {
          this.provinceList = res.object
        } else {
          this.$message.error(res.message)
        }
      },
      // 下拉
      async handleVal (item, index) {
        const { data: res } = await this.post(this.api.codeConfig.getChildrenArea, {
          id: item.baseAreaId
        })
        if (res.code === '200') {
          this.addForm.areaCodeDtos[index].baseAreaId = item.baseAreaId
          this.addForm.areaCodeDtos[index].areaCodeDtos = res.object.map(({
            id,
            name
          }) => ({
            baseAreaId: id,
            name,
            isShow: true,
            baseAreaCode: ''
          }))

        } else {
          this.$message.error(res.message)
        }

      },
      // 详情
      async getServiceChargeCode () {
        const { data: res } = await this.post(this.api.codeConfig.getServiceChargeCode, {
          code: this.type
        })
        if (res.code === '200') {
          // 无详情 则是添加, true 则是详情
          if (res.object) {
            let resData = res.object
            if (resData.areaCodeDtos) {
              this.addForm = resData
              this.addForm.areaCodeDtos.map(item => {
                item.isShowProvince = true
                item.areaCodeDtos.forEach(e => {
                  e.isShow = true
                  e['name'] = e.areaName
                })
              });
            }

          } else {
            // this.$message.error(`请添加 [${this.codeConfigInfo.name}] 全国统一编码`)
          }
        } else {
          this.$message.error(res.message)
        }
      }
    },
    created () {
      this.getChildrenArea() // 添加
      this.getServiceChargeCode() // 详情
    }
  }
</script>
<style scoped lang="scss">
  .box-wrapper {
    padding: 20px 0;
    min-height: 150px;
    border: 1px solid #dcdfe6;
    .del-btn {
      margin-left: 20px;
      span {
        padding-left: 5px;
      }
    }
  }
  .city-box {
    display: flex;
    flex-wrap: wrap;
    .city-item {
      display: flex;
      justify-content: space-around;
      width: 25%;
      margin-bottom: 10px;
      p {
        text-align: right;
        label {
          display: inline-block;
          margin-right: 10px;
          min-width: 100px;
        }
      }
    }
  }
  .submit-btn {
    text-align: center;
  }
</style>
